<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
const active: Ref<number> = ref(0)
import { categorylistFn, categorybrandlistFn, categorybrandprolistFn, getdetailFn } from '@/api/sort'
const categorylist: Ref<Array<string>> = ref([])
/*返回数据是 [{
  0:
    brand:'影驰'
}] */
//品牌列表
const categorybrandlist: Ref<Array<{ brand: string }>> = ref([])
//获取分类
categorylistFn().then(res => {
  console.log(1, res.data);
  categorylist.value = res.data
  //获取分类下的品牌
  categorybrandlistFn({ category: categorylist.value[active.value] }).then(res => {
    // console.log(2, res.data);
    categorybrandlist.value = res.data
    //获取分类--品牌 --产品
    categorybrandprolistFn({
      category: categorylist.value[active.value],
      brand: categorybrandlist.value[0].brand
    }).then(res => {
      console.log(5, res.data);
      categorybrandprolist.value = res.data

    })
  })
})
import type { iPro } from '@/types/homeType'

const categorybrandprolist: Ref<Array<iPro>> = ref([])
// 传参category和brand
//点击侧边导航栏的分类
function sliderbarClick(index: number) {
  active.value = index//记录被点击的索引值
  console.log(3, index);//可以拿到索引值
  categorybrandlistFn({ category: categorylist.value[index] }).then(res => {
    console.log(4, res.data);
    categorybrandlist.value = res.data
    categorybrandprolistFn({
      category: categorylist.value[index],
      brand: categorybrandlist.value[0].brand
    }).then(res => {
      console.log(5, res.data);
      categorybrandprolist.value = res.data
    })
  })

}

//获取某分类品牌下的产品
// categorybrandprolistFn
function onClickTab(item: { name: number }) {
  console.log(6, item.name);

  categorybrandprolistFn({
    category: categorylist.value[active.value],
    brand: categorybrandlist.value[item.name].brand
  }).then(res => {
    console.log(6, res.data);
    categorybrandprolist.value = res.data
  })
}
// //点击产品跳转详情页
// const detailList: Ref<Array<iPro>> = ref([])
// function proDetailClick() {
//   //获取分类下的品牌
//   categorybrandlistFn({ category: categorylist.value[active.value] }).then(res => {
//     console.log(44, res.data);
//     categorybrandlist.value = res.data
//     console.log(5111,categorybrandlist.value);
    
//     categorybrandprolistFn({
//       category: categorylist.value[active.value],
//       brand: categorybrandlist.value[0].brand
//     }).then(res => {
//       console.log(55, res.data);
//       categorybrandprolist.value = res.data
//       // getdetailFn({ proid: res.data[0].proid }).then(res => {
//       //   console.log(77, res.data);
//       //   detailList.value=res.data
//       // })
//     })

//   })
// }
const detailList: Ref<Array<string>> = ref([])
// function gridClick(priod:string){
//   priod.value=localStorage.setItem('priod')
//   getdetailFn({ proid: localStorage.getItem('priod') }).then(res => {
//         console.log(77, res.data);
//         detailList.value=res.data
//       })
// }
import {useRouter} from 'vue-router'
const router=useRouter()
function gridClick(proid: string) {
  //写详情页面接口
  getdetailFn({ proid: proid }).then(res => {
    console.log(4444, res.data);
    detailList.value = res.data
    console.log(8444,detailList.value);
    localStorage.setItem('proid',res.data.proid)
    router.push({
      path: '/detail/' + res.data.proid,
      query: { proid:  res.data.proid},
      
    })
  })
}
</script>

<template>
  <main class="box">
    <header class="header">头部-分类</header>
    <div class="content">
      <div class="left">
        <van-sidebar v-model="active">
          <van-sidebar-item @click="sliderbarClick" :title="item" v-for="item in categorylist" :key="item" />
        </van-sidebar>
      </div>
      <div class="right">
        <van-tabs @click-tab="onClickTab" title-active-color="#1989fa" :line-width="0" :duration="0">
          <van-tab v-for="item in categorybrandlist" :key="item.brand" :title="item.brand">
            <van-grid :column-num="3">
              <van-grid-item @click="gridClick(item.proid)" v-for="item in categorybrandprolist" :icon="item.img1" :text="item.brand" :key="item.proid"
                 />
              <!-- <van-grid-item v-for="item in categorybrandprolist" :icon="item.img1" :text="item.brand" :key="item.proid"
                @click="proDetailClick" /> -->

            </van-grid>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </main>
</template>
<style lang="scss" scoped>
.box {
  .content {
    display: flex;

    .left {
      width: 22%;
      overflow: auto;
    }

    .right {
      flex: 1;
    }
  }
}
</style>